.goods-tab{
    position: relative;
    z-index: 10;
    margin-bottom: 1rem;
    margin-top: 47px;
    .tab-item{
        position: relative;
        float: left;
        width: 50%;
        height: 40px;
        line-height: 40px;
        background-color:#eee;
        text-align: center;
        color:#414141;
        font-size: 1.6rem;
        .triangle{
            position: absolute;
            left:50%;
            bottom:0px;
            margin-left: -6px;
            display:none;
            width: 0;
            height: 0;
            border-width: 6px;
            border-style: dashed dashed solid dashed;
            border-color: transparent transparent #fff;
        }
        &:after{
            position: absolute;
            top: 10px;
            right:0;
            content:'';
            width: 1px;
            height: 20px;
            background-color: #e0e0e0;
        }   
    }
    .tab-cur{
        color:#ef4e38;
        .triangle{
            display:inline-block;
        }
    }
    .w40{width: 40%;}
    .w20{width: 20%;}
    .sort{
        &:after{
                position: absolute;
                left:-1px;
                top:0;
                width: 1px;
                height: 40px;
                background-color: #e5e5e5;
                border-right:1px solid #f2f2f2;
        }
        .sort-icon{
            display:block;
            margin:8px auto;
            width: 28px;
            height: 20px;
            background-position: 0 -71px;
            cursor: pointer;
        }
    }
    .sort-type{
        position: absolute;
        left: 50%;
        top:40px;
        display:none;
        margin-left: -105px;
        width: 110px;
        padding: 0 10px;
        background-color: #292c33;
        border-radius: 3px;
        transition: all .5s ease .1s;
        span{
            position: absolute;
            right:20px;
            top:-11px;
            margin-left: -6px;
            display:inline-block;
            width: 0;
            height: 0;
            border-width: 6px;
            border-style: dashed dashed solid dashed;
            border-color: transparent transparent #292c33;
        }
        a{
            display:block;
            height: 39px;
            line-height: 39px;
            border-bottom:1px solid #2e3137;
            color:#fff;
            font-size: 14px;
            text-align: center;
            &:hover{
                color:#ef4e38;
            }
        }
        &-cur{  
            display:block
        }
    }
}

.goods-type{
    margin-left: -45%;
    position: fixed;
    top:0;
    left:0;
    z-index: 9998;
    margin-top: 47px;
    padding-bottom: 30px;
    width: 42%;
    height:100%;
    box-shadow:1px 6px 15px -1px #999;
    background-color: #fff;
    overflow-y: auto;
    transition:all .5s ease .1s;
    .item{
        padding: 0 20px;
        height:40px;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        a{
            display:inline-block;
            border-bottom:1px solid #e4e4e4;
            width: 100%;
            color:#000;
            span{
                display:inline-block;
                margin-right: 5px;
                width: 17px;
                height: 17px;
                vertical-align: middle;
            }
            .def{background-position: -45px -34px;}
            .mz{ background-position: -45px -52px;}
            .nz{ background-position: -45px -73px;}
            .xz{width: 18px; background-position: -43px -92px;}
            .ps{ background-position: -45px -111px;}
            .ms{ background-position: -67px -52px;}
            .jd{ background-position: -67px -73px;}
            .jj{ background-position: -68px -92px;}
            .mr{ background-position: -67px -110px;}
            .zh{ background-position: -67px -32px;}
            
        }
    }
}
.goods-type-cur{
    margin-left: 0;
}

.goods-list{
    a{
        position: relative;
        display:inline-block;
        width: 100%;
        height:113px;
        border-bottom:1px solid #f1f1f1;
        background-color: #fff;
        .goods-tit{
            margin-top: 10px;   
            max-width: 160px;
            font-size: 14px;
            height: 20px;
            color:#000;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .goods-img {
            float: left;
            width: 124px;
            height: 114px;  
            background-color: #fff;
            img {
                float: left;
                margin-top: 5px;
                margin-left: 10px;
                width: 104px;
                height: 104px;
                background:url(../img/shi_load.gif) no-repeat center;
            }
        }
        .goods-number{
            display:block;
            margin-top: 20px;
            margin-bottom: 5px;
            color:#999;
            font-size: 14px;
            b{color:#ef4e38;}
        }
        .goods-price{
            color:#999;
            font-style: 12px;
            b{
                text-decoration: line-through;
            }
        }
        .p-total{
            float: right;
            margin-right: 10px;
            color:#999;
            font-size: 12px;
        }
        .goods-icon{
            position: absolute;
            right:10px;
            top:10px;
            display:inline-block;
            width: 18px;
            height: 17px;
        }
        .s-icon{
            background-position: -156px -46px;
        }
        .x-icon{
            background-position: -156px -62px;
        }
        &:hover {
            background-color: #e6e6e6;
            border-color: #e6e6e6;
            .goods-img {
                background-color: #e6e6e6;
            }
        }
    }
}

.goods-more{
    display:none;
    margin-top: 10px;
    margin-bottom: 30px;
    padding: 0 10px;
    text-align: center;
    a{
        display:block;
        height: 38px;
        line-height: 38px;
        font-size: 14px;
        border:2px solid #f4f4f4;
        background-color: #fafafa;
        color:#f06e5f;
        &:hover{
            border-color:#e2e2e2;
            background-color: #ededed;
        }
    }
    .disabled{
        color:#666;
        border-color:#e2e2e2;
        background-color: #ededed;
        cursor: default;
    }
}


.top{
    position: fixed;
    right:15px;
    bottom:30px;
    display:none;
    width: 30px;
    height: 36px;
    background-position:1px -32px;
}

.loader {
    width: 30px;
    height: 30px;
    position: relative;
    margin: 40px auto;
    overflow: hidden;
}

.loader:before, .loader:after {
    position: absolute;
    top: 0;
    left: 0;
    content:'';
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #ef4e38;
    opacity: 0.6;
    animation: bounce 2.0s infinite ease-in-out;
}

.loader:after {
    animation-delay: -1.0s;
}

@keyframes bounce {
    0%, 100% {
        transform: scale(0.0);
    }
    50% {
        transform: scale(1.0);
    }
}
